<template>
    <div class="flex_row">
        <div class="flex_col m5 p10">
            <div class="flex_row_center">
                <el-button @click="onClickAdd" type="primary">增加</el-button>
                <el-button @click="onClickCreate" type="info">生成</el-button>
            </div>
            <PartsGpioCnf v-for="(item, index) in ctx.pins" :key="item.id" v-model="ctx.pins[index]"/>
        </div>
        <pre><code class="language-c">{{ ctx.codes }}</code></pre>
    </div>

</template>

<script lang="ts" setup>

import { onMounted, reactive } from 'vue';
import HIGH from 'highlight.js'
import 'highlight.js/styles/default.min.css'
import { newPinConfig, type PinConfig } from '@/service/stm32f1/gpio';
import PartsGpioCnf from '@/components/parts/stm32f1/PartsGpioCnf.vue';
import { create } from '@/service/stm32f1/gpio_code';
import { serverGet, serverGet2 } from '@/service/server';

onMounted(() => {
    HIGH.highlightAll();
})

interface Ctx {
    codes: string,
    pins: PinConfig[],
}

const ctx = reactive<Ctx>({
    codes: '',
    pins: []
});

function onClickAdd() {
    ctx.pins.push(newPinConfig());
}

function onClickDel(index: number) {

}

function onClickCreate() {
    ctx.codes = create('test', ctx.pins);
   // console.log(ctx.pins);
}



async function test() {
    const ret = await serverGet2<string[]>('/mcu/query/family');
    console.log(ret);

    interface Req {
        family: string,
    }

    const w = await serverGet<Req, string[]>('/mcu/query/line', {
        family: ret[2]
    });
    console.log(w);
}

test();

</script>
